<template>
  <div class="machine-fullview">
    <div class="machine-container">
      <div class="machine">
        <div
          v-for="(item, i) in recument"
          :key="i"
          class="silder"
          @click="checkRecument(item)"
          :class="radio == item.value ? 'bottom-line' : null"
        >
          {{ item.name }}
        </div>
        <div class="tips">
          <el-tooltip
            class="item"
            effect="dark"
            content="数字:卧理机第几层 | 视角:俯视 | 箭头:玻璃进出方向"
            placement="right-end"
          >
            <i class="el-icon-bell"></i>
          </el-tooltip>
        </div>
      </div>
      <div class="machine-views">
        <div class="top-view">
          <Macine
            v-model="selected"
            :glassList="glassList"
            :proportion="proportion"
            :radio="radio"
            ref="macine"
          />
          <div class="machine-action">
            <el-table :data="recmnetGlassList" height="600">
              <el-table-column prop="id" label="ID" width="80" />
              <el-table-column prop="grid" label="格号" width="100" />
              <el-table-column label="尺寸" width="140">
                <template slot-scope="scope">
                  <div class="ruleGlass">
                    {{ scope.row.furInWidth }}*{{ scope.row.furInHeight }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="thick" label="厚度" width="100" />
              <el-table-column label="识别码" width="120" prop="optCodeContext">
              </el-table-column>
              <el-table-column prop="workId" label="订单号" width="100" />
              <el-table-column
                prop="clientName"
                label="客户"
                width="150"
                show-overflow-tooltip
              />
              <el-table-column prop="createTime" label="创建时间" width="200">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-popconfirm
                    cancel-button-text="取消"
                    confirm-button-text="确定"
                    icon="el-icon-info"
                    icon-color="red"
                    @confirm="handleUpdate(scope.row, 1)"
                    title="您确定此玻璃报损吗？"
                  >
                    <el-button
                      type="text"
                      icon="el-icon-edit"
                      slot="reference"
                      v-hasPermi="['assembly:glass:edit']"
                      >报损</el-button
                    >
                  </el-popconfirm>
                  <el-popconfirm
                    cancel-button-text="取消"
                    confirm-button-text="确定"
                    icon="el-icon-info"
                    icon-color="red"
                    @confirm="handleUpdate(scope.row, 2)"
                    title="您确定此玻璃异常吗？"
                  >
                    <el-button
                      style="padding-left: 5px"
                      type="text"
                      v-hasPermi="['assembly:glass:edit']"
                      icon="el-icon-error"
                      slot="reference"
                      >异常</el-button
                    >
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { recument, proportion } from "./config/radio";
import { mapState } from "vuex";
import { abnormal } from "@/api/production/quartz";
import RecumentStatus from "@/views/components/production/recumentStatus.vue";
import {
  forceComeRecumentGrid,
  stopRecumentGrid,
} from "@/api/production/quartz";
import Macine from "@/views/components/production/macine.vue";
import { recumentList } from "@/views/production/device/Config/label";
export default {
  components: {
    RecumentStatus,
    Macine,
  },
  data() {
    return {
      radio: sessionStorage.getItem("machine") || 1,
      recument,
      selected: 0,
      loading: false,
      timer: null,
      proportion,
    };
  },
  created() {
    clearInterval(this.timer);
    this.$store.dispatch("listGlass");
    this.timer = setInterval(() => {
      this.$store.dispatch("listGlass");
    }, 5000);
  },
  destroyed() {
    clearInterval(this.timer);
  },
  methods: {
    checkRecument(e) {
      this.radio = e.value;
      sessionStorage.setItem("machine", this.radio);
    },
    handleFreeze(status) {
      let params = {
        type: this.radio,
        grid: this.selected,
        status,
      };
      this.$confirm(
        `此次操作将会导致${recument[this.radio - 1].name}第${
          this.selected
        }笼被${status == 0 ? "恢复" : "冻结"}！,是否继续`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          stopRecumentGrid(params).then((res) => {
            if (res.code == 200) {
              this.$message.success("操作成功");
              this.$refs.macine.initGrid();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleForceCome() {
      let params = {
        type: this.radio,
        grid: this.selected,
      };
      this.$confirm(
        `此次操作将会导致${this.radio}号卧理机第${this.selected}笼内玻璃全部清空！,是否继续`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          forceComeRecumentGrid(params);
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    getGlassList() {},
    // radio 选中发生变化 切换卧理机
    handlerRecumentChnage(e) {
      window.localStorage.setItem("recumentRadio", this.radio);
      this.selected = 0;
      this.getMachine();
    },
    handleUpdate(row, state) {
      if (sessionStorage.getItem("showNewLosses") == "true" && state == 1) {
        this.$openLosses.showDialog([row], ()=>{this.$store.dispatch("listGlass")});
      } else {
        this.$prompt("请输入密码", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputPattern: /^5563$/,
          inputErrorMessage: "密码错误",
          inputType: "password",
        }).then(({ value }) => {
          abnormal(row.id, state).then((res) => {
            this.$modal.msgSuccess(res.msg);
            this.$store.dispatch("listGlass")
          });
        });
      }
    },
  },
  computed: {
    ...mapState({
      glassList(state) {
        let arr = {
          1: [recumentList[0].dictValue],
          2: [recumentList[1].dictValue],
          3: [recumentList[2].dictValue],
        };
        return state.Glass.glass.filter(
          (item) => item.place == arr[this.radio][0]
        );
      },
    }),
    recmnetGlassList() {
      let arr = {
        1: [recumentList[0].dictValue],
        2: [recumentList[1].dictValue],
        3: [recumentList[2].dictValue],
      };
      let arr2 = [];
      for (let key in arr) {
        if (this.radio == key) {
          arr2 = this.glassList
            .filter((item) => arr[key].includes(item.place * 1))
            .filter((item) =>
              this.selected == 0 ? true : item.grid == this.selected
            );
          this.selected == 0
            ? arr2.reverse()
            : arr2.sort((a, b) => {
                return b.gridGroup - a.gridGroup;
              });
          break;
        }
      }
      return arr2;
    },
    outRecumentGlass() {
      return this.glassList
        .filter((item) =>
          this.radio == 1
            ? item.place == 3
            : this.radio == 2
            ? item.place == 4
            : this.radio == 3
            ? item.place == 5
            : false
        )
        .map((item) => item.grid);
    },
  },
  watch: {},
  mounted() {
    this.$route.params.index &&
      this.checkRecument({ value: this.$route.params.index });
  },
  beforeDestroy() {},
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.machine-fullview {
  height: calc(100vh - 50px);
  padding: 0 10px;
}
.machine-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.machine {
  height: 5%;
  display: flex;
  border-bottom: 1px solid #e6e6e6;

  .silder {
    height: calc(100% - 1px);
    min-width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    margin-right: 20px;
    transform: translateY(1px);
    padding: 0 10px;
  }
  .tips {
    height: 100%;
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: 20px;
    letter-spacing: 1.5px;
    font-size: 16px;
  }
  .bottom-line {
    // border-bottom: 2px solid #409eff;
    background: linear-gradient(#fafafa, #1890ff);
  }
  .silder:hover {
    border-bottom: 2px solid #409eff;
  }
  .recument-no {
    width: 100%;
    height: 50px;
  }
}
.mb8 {
  display: flex;
  align-items: center;
}
.machine-views {
  flex: 1;
  width: 100%;
  height: 95%;
  .top-view {
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
    display: flex;
    flex-wrap: nowrap;
    .machine-img {
      position: relative;
      width: 30%;
      height: 100%;
      border-right: 1px dashed #e6e6e6;
      .list {
        width: 100%;
        height: 100%;
        padding: 5px 5px 5px 0;
        display: flex;
        flex-wrap: wrap;
      }
      .machine-box {
        position: relative;
        width: calc(49% - 4px);
        height: calc(20% - 4px);
        border: 2px solid black;
        margin-right: 1%;
        cursor: pointer;
        padding: 2px 0px 0px 2px;
        .postion {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          font-size: 60px;
          font-weight: bold;
          color: #e6e6e6;
          z-index: -1;
        }
        .direction {
          position: absolute;
          right: 0;
          top: 0;
          font-size: 20px;
          font-weight: bold;
          // color: #e6e6e6;
          z-index: -1;
        }
        .glass {
          background-color: #409eff;
          margin-bottom: 5px;
          display: flex;
          flex-direction: column;
          // align-items: center;
          justify-content: center;
          font-size: 12px;
          font-weight: bold;
          box-shadow: 3px 3px 3px rgba(0, 0, 0, 15%);
          padding: 2px;
          .rule {
            flex: 1;
          }
          .clientName {
            flex: 1;
            display: flex;
            margin-left: auto;
            align-items: flex-end;
          }
        }
        .posttion_disabled {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        img {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          width: 80%;
          height: 100%;
        }
      }
      .colorBorder {
        border: 2px solid red;
      }
    }
    .RecumentStatus {
      width: 38%;
      height: 100%;
    }
    .machine-action {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
  }
}
.ruleGlass {
  font-size: 20px;
  font-weight: bold;
}
::v-deep .el-row {
  margin-left: 0px !important;
}
::v-deep .cell {
  font-size: 18px;
}
::v-deep .el-icon-bell,
.el-icon-setting {
  font-size: 24px;
  cursor: pointer;
  margin-left: 5px;
}
::v-deep .el-icon-setting:hover {
  text-decoration: underline;
  text-decoration-color: #e6e6e6;
  cursor: pointer;
}
</style>
